.index-wrap {
	--height: var(--height-value);
	--search-height:0rpx;
	--top-value:calc(var(--height) + 88rpx);
	--null-height:300rpx;
	.header-search {
		display: flex;
		align-items: center;
		height: var(--search-height);
		padding: 0 24rpx;
		box-sizing: border-box;
		position: fixed;
		height: 88rpx;
		left: 0;
		top: var(--height);
		right: 0;
		z-index: 88;
		
		.search-wrap{
			margin-left: 24rpx;
			flex: 1;
			display: flex;
			align-items: center;
			padding: 12rpx 32rpx;
			box-sizing: border-box;
			position: relative;
			background: rgba(255,255,255,0.4);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.search-icon{
				width: 32rpx;
				height: 32rpx;
			}
			.search-text{
				height: 40rpx;
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
				line-height: 40rpx;
				margin-left: 8rpx;
			}
		}
	
		.location-wrap {
			display: flex;
			align-items: center;
	
			.arrow {
				width: 12rpx;
				height: 9rpx;
			}
	
			.location-value,.area-value {
				height: 44rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				margin-left: 8rpx;	
				width: 100rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.area-value{
				margin-left: 12rpx!important;
				font-size: 28rpx!important;
			}
	.arrow-icon {
		width: 14rpx;
		height: 14rpx;
		margin-left: 8rpx;
		&.active{
		}
	}
			.location-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.index-page-container{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: calc(var(--top-value) + var(--search-height));
		.null-box{
			height: var(--null-height);
			background: transparent;
		}
		.scroll-conn{
			// padding: 0 32rpx;
			box-sizing: border-box;
		}
	}
	.index-conn-wrapper-wwm{
		padding: 24rpx 32rpx 0;
		box-sizing: border-box;
		// background-color: #F7F8FA;
		position: relative;
		&::after{
			content: "";
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: #F7F8FA;
			z-index: -1;
		}
		.index-conn-bg-wrap{
			width: 100%;
			height: 100%;
		}
	}
	.header-wrapper {
			width: 100%;
			height: 618rpx;
			position: relative;
			box-sizing: border-box;
			padding-top: var(--height);
z-index: -1;
			
	}
	.tab-wrap{
		margin: 32rpx 0 24rpx;
		// margin-top: 24rpx;
		// padding: 32rpx 16rpx 24rpx;
		box-sizing: border-box;
		
		.tab-list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			height: 40rpx;
			.tab-slide{
				width: 90rpx;
				height: 4rpx;
				background: linear-gradient(90deg, #5ACFFF 0%, rgba(76,203,255,0.1) 100%);
				position: absolute;
				left: calc(1px * var(--left));
				bottom: 0;
				z-index: 2;
				transition: left cubic-bezier(0.23, 1, 0.320, 1) calc(var(--duration) * 0.1s);
				
			}
			.tab-item{
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
				&.active {
					color: rgba(0,0,0,0.9);
					font-weight: bold;
				}
			}
		}
	}
	.main-wrap{
		box-sizing: border-box;
		position: relative;
		.main-inner{
			width: 100%;
			height: 392rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			box-sizing: border-box;
			padding: 32rpx;
			.desc-list{
				display: flex;
				align-items: center;
				margin-top: 32rpx;
				flex-flow: row nowrap;
				justify-content: space-between;
				.desc-item{
					display: flex;
					align-items: center;
					&:last-child{
						margin-right: 0;
					}
					.desc-icon{
						width: 28rpx;
						height: 28rpx;
					}
					.desc-text{
						height: 32rpx;
						font-size: 20rpx;
						color: rgba(0,0,0,0.4);
						line-height: 32rpx;
						margin-left: 8rpx;
						white-space: nowrap;
					}
				}
			}
			.confirm-btn{
				height: 80rpx;
				background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: rgba(0,0,0,0.9);
				margin-top: 32rpx;
				box-shadow: none;
				&::after{
					display: none;
					border: 0;
				}
			}
			.hot-address{
				display: flex;
				align-items: center;
				.hot-list{
				display: flex;
				align-items: center;
				.hot-item{
					padding: 6rpx 12rpx;
					background: #F2F2F2;
					border-radius:  4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					color: rgba(0,0,0,0.4);
					margin-right: 16rpx;
				}
				}
				.hot-label{
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
					line-height: 40rpx;
					margin-right: 32rpx;
				}
			}
			.main-line {
				width: 100%;
				height: 2rpx;
				background-color: #E5E6EB;;
				margin: 32rpx 0;
			}
			.main-title{
				display: flex;
				align-items: center;
				.blue-icon{
					width: 48rpx;
					height: 48rpx;
				}
				.main-label {
					height: 48rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.9);
					line-height: 48rpx;
					margin-left: 8rpx;
				}
				.main-input{
					height: 44rpx;
					font-size: 30rpx;
					color: rgba(0,0,0,0.4);
					line-height: 44rpx;
					margin-left: 24rpx;
				}
			}
		}
	}
	.main-list-wrap{
		padding: 0 32rpx;
	}
}